<template>
  <div class="app-container">
    <el-tabs v-model="activeName" type="card" @tab-change="tabChange">
      <el-tab-pane label="出图设置" name="0">
        <PlotSettings ref="plotSettings" />
      </el-tab-pane>
      <el-tab-pane label="图件模板" name="1">
        <MapTemplate ref="mapTemplate" />
      </el-tab-pane>
      <el-tab-pane label="数据管理" name="2">
        <DataManage ref="dataManage"/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup name="dataManage">
import PlotSettings from './tabComponents/plotSettings.vue'
import MapTemplate from './tabComponents/mapTemplate.vue'
import DataManage from './tabComponents/dataManage.vue'

const { proxy } = getCurrentInstance()
const activeName = ref('0')
const tabChange = (val) => {
  switch (val) {
    case '0':
      proxy.$refs.plotSettings.getPlot()
      break;
    case '1':
      proxy.$refs.mapTemplate.getList()
      break
    case '2':
      proxy.$refs.dataManage.completeRefreshIndexMap = true
      break
    default:
      break
  }
}
onMounted(() => {
  proxy.$refs.plotSettings.getPlot()
})
</script>
<style lang="scss" scoped>
.app-container {
  height: 100%;

  &>.el-tabs {
    height: 100%;

    &>:deep(.el-tabs__content) {
      height: calc(100% - 56px);

      &>.el-tab-pane {
        height: 100%;
      }
    }
  }
}
</style>